import * as React from "react";
import { Table, message, Spin, Modal } from "antd"; //columnsDataCLass
import { SearchState } from "../Search";
import { getfaultWarnData } from "../../../ServeApi";
import { AjaxData } from "../../../../../../data/interface/publicInterface";

export interface SearchTableProps {
  condition: SearchState;
}

export interface SearchTableState {
  pageSize: number;
  pageIndex: number;
  total: number;
  loading: boolean;
}

interface ColumnsData {
  title: string;
  dataIndex: string;
  key: string;
  render?: (text: string, record: any) => any;
}
class SearchTable extends React.Component<SearchTableProps, SearchTableState> {
  private columns: ColumnsData[] = [
    {
      title: "设备编号",
      dataIndex: "no",
      key: "no",
    },
    {
      title: "设备名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "告警时间",
      dataIndex: "warnTime",
      key: "warnTime",
    },
    {
      title: "告警内容",
      dataIndex: "warnContent",
      key: "warnContent",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (text: any) => {
        let str = "";
        switch (text) {
          case "0":
            str = "未处理";
            break;
          case "1":
            str = "已处理";
            break;
          default:
            str = "暂无";
            break;
        }
        return str;
      },
    },
  ];
  private DataSouce: any[] = [];
  state = { pageSize: 10, pageIndex: 1, total: 0, loading: false };
  render() {
    let { pageSize, total, loading } = this.state;
    return (
      <div className="rowcon_body" style={{ marginTop: 16 }}>
        <Spin spinning={loading}>
          <Table
            columns={this.columns}
            dataSource={this.DataSouce}
            pagination={{
              pageSize: pageSize,
              total: total,
              current: this.state.pageIndex,
              onChange: (page: number) => {
                this.setState({ pageIndex: page });
                this.getPream();
              },
            }}
            // scroll={{ y: 300, x: 1500 }}
            sticky
          />
        </Spin>
      </div>
    );
  }
  shouldComponentUpdate(
    newProps: SearchTableProps,
    newState: SearchTableState
  ) {
    if (newProps.condition !== this.props.condition) {
      this.getDataSouce(newProps.condition);
    }
    return true;
  }
  getPream() {
    this.getDataSouce(this.props.condition);
  }
  async getDataSouce(condition: any) {
    let { pageSize, pageIndex } = this.state;
    let pream = {
      start: condition.startDate?.startOf("day").valueOf(),
      end: condition.endDate.endOf("day").valueOf(),
      likeStr: condition.likeStr,
      pageIndex,
      pageSize,
    };
    let _this = this;
    this.setState({ loading: true });
    let res: any = await getfaultWarnData(JSON.stringify(pream)).catch(
      (err) => {
        message.error(err);
        this.setState({ loading: false });
      }
    );
    let json: AjaxData = res;
    if (json.success) {
      this.DataSouce = json.data.records;
      this.setState({ total: json.data.total, loading: false });
      this.forceUpdate();
    } else {
      Modal.error({
        title: res.message,
        onOk() {
          _this.setState({ loading: false });
        },
      });
    }
  }
}

export default SearchTable;
